$(function () {
  //初始化方向
  let direction = {up:1,right:2,down:3,left:4};
  //初始化页面坐标
  let now = {col:1,row:1};
  let last = {col:0,row:0};
  //初始化翻页参数
  let isSwiping = false;

  //向上滑动
  $('.page').swipeUp(function () {
    if (isSwiping){
      return;
    }



    //最底层无法再滑动
    if(now.col>=5){
      return;
    }

    if (now.row > 1){
      last.col = now.col;
      last.row = 1;
      //将现坐标的Y坐标加1
      now.col = last.col + 1;
      now.row = 1;
      console.log(now)
      movePage(direction.up)
    }else {
      //将现有坐标设置为过去式
      last.col = now.col
      last.row = now.row
      //将现坐标的Y坐标加1
      now.col = last.col + 1;
      console.log(now)
      movePage(direction.up)
    }



  })

  //向下滑动
  $('.page').swipeDown(function () {
    if (isSwiping){
      return;
    }


    //最底层无法再滑动
    if(now.col<=1){
      return;
    }

    if (now.row > 1){
      last.row = 1;
      last.row = now.row;
      //将现坐标的Y坐标加1
      now.col = last.col - 1;
      now.row = 1;
      movePage(direction.down)
    }else {
      //将现有坐标设置为过去式
      last.col = now.col
      last.row = now.row
      //将现坐标的Y坐标加1
      now.col = last.col - 1;
      movePage(direction.down)
    }

  })

  //向左滑动
  $('.page').swipeLeft(function () {

    if (isSwiping){
      return;
    }



    //最底层无法再滑动
    if( (now.row>=2) || (now.col === 1 )|| (now.col === 5) ){
      return;
    }
    //将现有坐标设置为过去式
    last.col = now.col
    last.row = now.row
    //将现坐标的Y坐标加1
    now.row = last.row + 1;
    console.log(now)
    movePage(direction.left)


  })

  //向右滑动
  $('.page').swipeRight(function () {

    if (isSwiping){
      return;
    }



    //最底层无法再滑动
    if( (now.row<=1) || (now.col === 1 )|| (now.col === 5) ){
      return;
    }
    //将现有坐标设置为过去式
    last.col = now.col
    last.row = now.row
    //将现坐标的Y坐标加1
    now.row = last.row -1;
    console.log(now)
    movePage(direction.right)


  })

  //定义一个滑动的功能函数
  function movePage(dir) {
    //初始化参与动画的两个页面
    let lastPage = '.page-' + last.col + '-' + last.row;
    let nowPage = '.page-' + now.col + '-' + now.row;


    //初始化两个动画类
    var inClass = '' //进场动画类
    var outClass = ''//出场动画类

    //匹配方向
    switch (dir){
      case direction.up:
        outClass = 'pt-page-moveToTop';
        inClass = 'pt-page-moveFromBottom';
        break;
      case direction.down:
        outClass = 'pt-page-moveToBottom';
        inClass = 'pt-page-moveFromTop';
        break;
      case direction.left:
        outClass = 'pt-page-moveToLeft';
        inClass = 'pt-page-moveFromRight';
        break;
      case direction.right:
        outClass = 'pt-page-moveToRight';
        inClass = 'pt-page-moveFromLeft';
        break;
    }

    //完成过渡动画
    $(lastPage).addClass(outClass)
    $(nowPage).removeClass('hide')
    $(nowPage).addClass(inClass)

    isSwiping = true

    //动画完成之后，就不需要这两个类了，需要移除
    setTimeout(function () {
      $(lastPage).removeClass(outClass)
      $(lastPage).addClass('hide')
      $(lastPage).removeClass('page-current')
      $(lastPage).find('img').addClass('hide')
      $(nowPage).find('img').removeClass('hide')
      $(nowPage).addClass('page-current')
      $(nowPage).removeClass(inClass)

      isSwiping = false;
    },600)


  }
})